<template>
    <div class="my-header">
        <!-- <h1>头部导航</h1> -->
        <!-- 头部导航 -->
        <div class="top">
            <div>欢迎来到潮流男装</div>
            <div>
                <ul>
                    <li class="el-icon-goods">卖家中心</li>
                    <li class="el-icon-user" @click="like" v-show="!uname">
                        登录
                        <div id="model-box" v-show="IsShow" @click="hideModel">
                            <div id="center">
                                <template>
                                    <el-tabs v-model="activeName" @tab-click="handleClick">
                                        <el-tab-pane label="登录" name="first">
                                            <el-form ref="RegForm" :model="form" :rules="rules" label-width="100px">
                                                <el-form-item label="用户名" prop="name">
                                                    <el-input v-model="form.name" placeholder="用户名" />
                                                </el-form-item>
                                                <el-form-item label="密码" prop="pass">
                                                    <el-input type="password" v-model="form.pass" placeholder="密码" />
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="onSubmit">登录</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </el-tab-pane>
                                        <el-tab-pane label="注册" name="second">
                                            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                                <el-form-item label="用户名" prop="name">
                                                    <el-input v-model.number="ruleForm.age"></el-input>
                                                </el-form-item>
                                                <el-form-item label="密码" prop="pass">
                                                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                                                </el-form-item>
                                                <el-form-item label="确认密码" prop="checkPass">
                                                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </el-tab-pane>
                                    </el-tabs>
                                </template>
                            </div>
                        </div>
                    </li>
                    <!-- 登录和注册，用户名存在时显示 -->
                    <li class="el-icon-user" v-show="uname">
                        欢迎：{{uname}}
                        <!-- uname改成null,即不存在 -->
                        <button @click="updateUname(null)">退出</button>
                    </li>
                    <li class="el-icon-s-custom">个人中心</li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="main">
            <div class="search">
                <img src="../../assets//images/logo.png" alt="">
                <div>
                    <input type="text" placeholder="搜索">
                    <el-button type="primary" icon="el-icon-search" size=""></el-button>
                </div>
                <div>
                    <span class="el-icon-star-off"></span>
                    <span class="el-icon-shopping-cart-1"></span>
                </div>
            </div>
            <div class="nav">
                <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#ee6e6e"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1"><a href="#">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">当季热卖</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3"><a href="#">春夏新品</a></el-menu-item>
                    <el-menu-item index="4"><a href="#">明星专区</a></el-menu-item>
                    <el-menu-item index="5"><a href="#">西装/外套</a></el-menu-item>
                    <el-menu-item index="6"><a href="#">裤装</a></el-menu-item>
                    <el-menu-item index="7"><a href="#">套装</a></el-menu-item>
                    <el-menu-item index="8"><a href="#">饰品</a></el-menu-item>
                </el-menu>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
    export default {
        data() {
            var checkName = (rule, value, callback) => {
                if (!value) {
                return callback(new Error('用户名不能为空'));
                }
                // setTimeout(() => {
                // if (!Number.isInteger(value)) {
                //     callback(new Error('请输入数字值'));
                // } else {
                //     if (value < 18) {
                //     callback(new Error('必须年满18岁'));
                //     } else {
                //     callback();
                //     }
                // }
                // }, 1000);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请输入密码'));
                } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
                } else {
                callback();
                }
            };
            return {
                activeIndex2: '1',//查找绑定
                IsShow: false,//点击登录弹框绑定
                activeName: 'second',
                //登录页面
                form: {
                    name:'',//绑定姓名
                    pass:'',//绑定密码
                    // phone:'',//绑定手机号
                },
                rules: {
                    name:[
                        {required:true,message:'姓名不能为空',trigger:'blur'},
                    ],
                    pass:[
                        {required:true,message:'密码不能为空',trigger:'blur'},
                        {pattern:/^\d{6}$/,message:'6位数字',trigger:'blur'}
                    ],
                },
                //注册绑定
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    name: ''
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    name: [
                        { validator: checkName, trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
                ...mapState(['uname']),
        },
        methods: {
            //点击登录弹框
            like() {
                this.IsShow = true;
            },
            hideModel() {
                this.IsShow = false;
            },
            //用户登录验证
            // 处理点击提交按钮的事件
            ...mapMutations(['updateUname']),
            onSubmit() {
                console.log('表单数据：',this.form);
                const url = 'http://localhost:8000/goods/login';
                const params = `uname=${this.form.name}&upwd=${this.form.pass}`;
                console.log(params);
                this.axios.post(url,params).then(res=>{
                    console.log('登录数据:',res);
                    console.log(res.status);
                    if (res.status == 200) {
                    //1.把用户名全局分享，存入vuex
                    this.$store.commit('updateUname',this.form.name);//固定语法，第一种方案
                    //2.跳转到首页
                    this.$router.push('/');//编程式跳转
                    } else {
                        alert('登录失败');
                    }
                });
            },
            // 用户注册验证
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
                const {uname,pwd,rePwd} = this;
                console.log(uname,pwd,rePwd);
                const params = `uname=${this.form.name}&upwd=${this.form.pass}`;
                const url = 'http://localhost:8000/goods/register';
                console.log('注册params:',params);
                this.axios.post(url,params).then(res => {
                    console.log('注册res:',res);
                    // this.res = data.res
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //查找
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },

        },
    }
</script>
<style scoped src="../../assets/css/index.css"></style>
<style lang="scss" scoped>

</style>